var flag = true;
$('.header-container').mouseover(function (e) {
    e.stopPropagation();
    if (flag) {
        $(this).stop().animate({
            height: '95px',
            top: '15px'
        }, 500, function () {

            $(this).stop().animate({
                height: '70px',
                top: '8px'
            }, 400, function () {

                $(this).stop().animate({
                    height: '75px',
                    top: '10px'
                }, 200, function () {

                    $(this).stop().animate({
                        height: '64px',
                        top: '0px'
                    }, 150);
                });
            });
        });
    };
    flag = false;
});

var xxx = 0;

$('.header-container').mousedown(function (event) {
    event.stopPropagation();
    var isMove = true;
    $(document).mousemove(function (e) {
        e.stopPropagation();
        yyy = e.scrollTop;
        xxx = e.clientY;
        if (isMove) {
            $('.header-container').stop().offset({
                top: yyy,
                left: 0
            }).height(xxx >= 64 ? xxx + 1 : 64);
        }
    });
    $('.header-container').mouseup(function (eve) {
        eve.stopPropagation();
        $('.header-container').stop().offset({
            top: yyy,
            left: 0
        }).height(num());
        // 内部盒子模块的弹弹弹
        if (xxx < 64) {

        } else if (xxx < 150) {
            $('.logo').stop().animate({
                width: '93px',
                height: '28px',
                left: '70px'
            }, 300, function () {
                $('.logo').stop().animate({
                    width: '125px',
                    height: '37px',
                    left: '54px'
                }, 350, function () {
                    $('.logo').stop().animate({
                        width: '100px',
                        height: '30px',
                        left: '63px'
                    }, 280, function () {
                        $('.logo').stop().animate({
                            width: '120px',
                            height: '36px',
                            left: '56px'
                        }, 200, function () {
                            $('.logo').stop().animate({
                                width: '113px',
                                height: '34px',
                                left: '60px'
                            }, 190);
                        });
                    });
                });
            });
            $('.upload').stop().animate({
                bottom: '6px'
            }, 330, function () {
                $('.upload').stop().animate({
                    bottom: '16px'
                }, 350, function () {
                    $('.upload').stop().animate({
                        bottom: '8px'
                    }, 280, function () {
                        $('.upload').stop().animate({
                            bottom: '14px'
                        }, 200, function () {
                            $('.upload').stop().animate({
                                bottom: '12px'
                            }, 190);
                        });
                    });
                });
            });
        } else if (xxx <= 260) {
            $('.logo').stop().animate({
                width: '60px',
                height: '18px',
                left: '86px'
            }, 240, function () {
                $('.logo').stop().animate({
                    width: '166px',
                    height: '50px',
                    left: '34px'
                }, 255, function () {
                    $('.logo').stop().animate({
                        width: '76px',
                        height: '23px',
                        left: '78px'
                    }, 220, function () {
                        $('.logo').stop().animate({
                            width: '132px',
                            height: '40px',
                            left: '50px'
                        }, 240, function () {
                            $('.logo').stop().animate({
                                width: '113px',
                                height: '34px',
                                left: '60px'
                            }, 255);
                        });
                    });
                });
            });
            $('.upload').stop().animate({
                bottom: '3px'
            }, 300, function () {
                $('.upload').stop().animate({
                    bottom: '19px'
                }, 290, function () {
                    $('.upload').stop().animate({
                        bottom: '5px'
                    }, 280, function () {
                        $('.upload').stop().animate({
                            bottom: '16px'
                        }, 250, function () {
                            $('.upload').stop().animate({
                                bottom: '12px'
                            }, 200);
                        });
                    });
                });
            });
        } else if (xxx <= 450) {
            $('.logo').stop().animate({
                width: '20px',
                height: '6px',
                left: '106px'
            }, 175, function () {
                $('.logo').stop().animate({
                    width: '280px',
                    height: '84px',
                    left: '-23px'
                }, 190, function () {
                    $('.logo').stop().animate({
                        width: '66px',
                        height: '20px',
                        left: '83px'
                    }, 165, function () {
                        $('.logo').stop().animate({
                            width: '160px',
                            height: '48px',
                            left: '36px'
                        }, 170, function () {
                            $('.logo').stop().animate({
                                width: '93px',
                                height: '28px',
                                left: '70px'
                            }, 190, function () {
                                $('.logo').stop().animate({
                                    width: '142px',
                                    height: '43px',
                                    left: '45px'
                                }, 210, function () {
                                    $('.logo').stop().animate({
                                        width: '113px',
                                        height: '34px',
                                        left: '60px'
                                    },230);
                                });
                            });
                        });
                    });
                });
            });
            $('.upload').stop().animate({
                bottom: '0px'
            }, 650, function () {
                $('.upload').stop().animate({
                    bottom: '24px'
                }, 200, function () {
                    $('.upload').stop().animate({
                        bottom: '5px'
                    }, 165, function () {
                        $('.upload').stop().animate({
                            bottom: '20px'
                        }, 200, function () {
                            $('.upload').stop().animate({
                                bottom: '10px'
                            }, 180, function () {
                                $('.upload').stop().animate({
                                    bottom: '17px'
                                }, 200, function () {
                                    $('.upload').stop().animate({
                                        bottom: '12px'
                                    },200);
                                });
                            });
                        });
                    });
                });
            });
        } else if (xxx > 450) {
            $('.logo').stop().animate({
                width: '0px',
                height: '0px',
                left: '56px'
            }, 100, function () {
                $('.logo').stop().animate({
                    width: '499px',
                    height: '150px',
                    left: '-133px'
                }, 180, function () {
                    $('.logo').stop().animate({
                        width: '33px',
                        height: '10px',
                        left: '100px'
                    }, 150, function () {
                        $('.logo').stop().animate({
                            width: '299px',
                            height: '90px',
                            left: '-33px'
                        }, 170, function () {
                            $('.logo').stop().animate({
                                width: '76px',
                                height: '23px',
                                left: '78px'
                            }, 210, function () {
                                $('.logo').stop().animate({
                                    width: '166px',
                                    height: '50px',
                                    left: '33px'
                                }, 230, function () {
                                    $('.logo').stop().animate({
                                        width: '113px',
                                        height: '34px',
                                        left: '60px'
                                    }, 280);
                                });
                            });
                        });
                    });
                });
            });
            $('.upload').stop().animate({
                bottom: '0px'
            }, 800, function () {
                $('.upload').stop().animate({
                    bottom: '30px'
                }, 180, function () {
                    $('.upload').stop().animate({
                        bottom: '5px'
                    }, 150, function () {
                        $('.upload').stop().animate({
                            bottom: '24px'
                        }, 170, function () {
                            $('.upload').stop().animate({
                                bottom: '10px'
                            }, 190, function () {
                                $('.upload').stop().animate({
                                    bottom: '15px'
                                }, 200, function () {
                                    $('.upload').stop().animate({
                                        bottom: '12px'
                                    }, 200);
                                });
                            });
                        });
                    });
                });
            });
        };
        isMove = false;
    });
});


// 这是框框的弹弹弹
function num() {
    if (xxx < 64) {
        $('.header-container').stop().animate({
            height: '64px',
            top: '0px'
        })
    } else if (xxx < 150) {
        $('.header-container').stop().animate({
            height: '50px',
            top: '0px'
        }, 300, function () {
            $('.header-container').stop().animate({
                height: '90px',
                top: '0px'
            }, 350, function () {
                $('.header-container').stop().animate({
                    height: '60px',
                    top: '0px'
                }, 280, function () {
                    $('.header-container').stop().animate({
                        height: '70px',
                        top: '0px'
                    }, 200, function () {
                        $('.header-container').stop().animate({
                            height: '64px',
                            top: '0px'
                        }, 190);
                    });
                });
            });
        });
    } else if (xxx <= 260) {
        $('.header-container').stop().animate({
            height: '30px',
            top: '0px'
        }, 240, function () {
            $('.header-container').stop().animate({
                height: '110px',
                top: '0px'
            }, 255, function () {
                $('.header-container').stop().animate({
                    height: '45px',
                    top: '0px'
                }, 220, function () {
                    $('.header-container').stop().animate({
                        height: '80px',
                        top: '0px'
                    }, 240, function () {
                        $('.header-container').stop().animate({
                            height: '64px',
                            top: '0px'
                        }, 255);
                    });
                });
            });
        });
    } else if (xxx <= 450) {
        $('.header-container').stop().animate({
            height: '10px',
            top: '0px'
        }, 175, function () {
            $('.header-container').stop().animate({
                height: '200px',
                top: '0px'
            }, 190, function () {
                $('.header-container').stop().animate({
                    height: '40px',
                    top: '0px'
                }, 165, function () {
                    $('.header-container').stop().animate({
                        height: '140px',
                        top: '0px'
                    }, 170, function () {
                        $('.header-container').stop().animate({
                            height: '55px',
                            top: '0px'
                        }, 190, function () {
                            $('.header-container').stop().animate({
                                height: '85px',
                                top: '0px'
                            }, 210, function () {
                                $('.header-container').stop().animate({
                                    height: '64px',
                                    top: '0px'
                                }, 230);
                            });
                        });
                    });
                });
            });
        });
    } else if (xxx > 450) {
        $('.header-container').stop().animate({
            height: '0px',
            top: '0px'
        }, 100, function () {
            $('.header-container').stop().animate({
                height: '350px',
                top: '0px'
            }, 180, function () {
                $('.header-container').stop().animate({
                    height: '20px',
                    top: '0px'
                }, 150, function () {
                    $('.header-container').stop().animate({
                        height: '230px',
                        top: '0px'
                    }, 170, function () {
                        $('.header-container').stop().animate({
                            height: '40px',
                            top: '0px'
                        }, 210, function () {
                            $('.header-container').stop().animate({
                                height: '100px',
                                top: '0px'
                            }, 230, function () {
                                $('.header-container').stop().animate({
                                    height: '64px',
                                    top: '0px'
                                }, 280);
                            });
                        });
                    });
                });
            });
        });
    }
};



